<template>
  <div>
    <zh-form
        :span="6"
        ref="rolePageFrom"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :model="formData"
        :rules="rules">

      <zh-card title="保护落实两线划定" style="width:100%">
        <zh-row >
          <zh-input label="点位名称" show-search :labelInValue="true" :filter-option="false"
                    :not-found-content="fetching ? undefined : null"
                    :defaultFields="{label: 'b0102',value: 'b0101'}" type="select" placeholder="请输入点位名称"
                    v-model="b01"
                    :options="b01DataList"
                    @search="handleSearch"
                    @change="handleChange">
            <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
          </zh-input>
          <zh-input
              prop="createTime"
              :disabled="disabled"
              type="date"
              label="时间"
              v-model="formData.createTime"
          ></zh-input>
        </zh-row>
      </zh-card>
    </zh-form>
  </div>
</template>

<script>
import {
  getSQAndWz, getBhlsLxhddtXgDetails, saveBhlsLxhddtXg, getB01DataList
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";
import {TreeSelect} from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

let timeout;
let currentValue;
export default {
  name: "BhlsLxhddtXgForm",
  components: {
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      dictData: {},
      disabled: false,
      formData: {
        b0101:'',
        b0102:'',
        createTime:""
      },
      sqData:[],
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      visible:false,
      zb1List:[
          {key:'保护落实',value:'保护落实'},
          {key:'保护工程',value:'保护工程'},
          {key:'保护经费',value:'保护经费'},
          {key:'活化开发',value:'活化开发'},
      ],
      zb2List:[
        {key:'修缮工程',value:'修缮工程'},
        {key:'展示工程',value:'展示工程'},
        {key:'经费广播',value:'经费广播'},
        {key:'申请经费额',value:'申请经费额'},
        {key:'落地经费额',value:'落地经费额'},
        {key:'已使用经费额',value:'已使用经费额'},
        {key:'活化利用总数',value:'活化利用总数'},
      ],
      fetching: false,
      b01DataList:[],
      b01:undefined,
    };
  },
  created() {
    this.init();
  },
  methods: {
    fetch(value, callback) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;

      function fake(that) {
        that.fetching = true
        if (value) {
          that.$http.post(getB01DataList, {b0102: value, b0122: that.formData.orgId}).then(res => {
            console.log(res)
            callback(res.result);
          }).catch((error) => {
            console.log(JSON.stringify(error))
          }).finally(() => {
            that.fetching = false
          })
        }
      }

      timeout = setTimeout(fake(this), 300);
    },
    handleSearch(value) {
      this.fetch(value, data => (this.b01DataList = data));
    },
    handleChange(option) {
      this.b01 = option
      this.formData.b0101 = option.key
      this.formData.b0102 = option.label
    },
    init(){
      this.$http.post(getSQAndWz, {}).then((res) => {
        this.sqData = res.result.sqData;
      });
    },
    initData(row, type){
      this.disabled = type === 'view'
      if(row.id){
        this.$http.post(getBhlsLxhddtXgDetails, {id:row.id}).then((res) => {
          this.formData = res.result;
          this.b01DataList = [{b0101: res.result.b0101, b0102: res.result.b0102}]
          this.b01 = {key: res.result.b0101, label: res.result.b0102}
        });
      }
    },
    saveData() {
      this.$loading.show('正在处理数据,请等待...')
      const params = Object.assign(this.formData)
      setTimeout(() => {
        this.$http.post(saveBhlsLxhddtXg, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if(this.listQuery){
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() =>{
        })
      }, 50)
    },
  },
}
</script>

<style scoped>

</style>